<template>
  <view class="changePassword content-wrap">
    <u-navbar title="修改密码" :title-bold="true" back-icon-color="#333" title-color="#000"></u-navbar>
    <u-form :model="form" ref="changePasswordForm" :rules="rules" label-width="220">
      <u-form-item :label-style="labelStyle" label="当前密码" prop="password">
        <u-input v-model="form.password" password-icon type="password" placeholder="请输入当前密码" />
      </u-form-item>
      <u-form-item :label-style="labelStyle" label="新密码" prop="newPassword">
        <u-input v-model="form.newPassword" password-icon type="password" placeholder="请输入新密码" />
      </u-form-item>
      <u-form-item :label-style="labelStyle" label="确认新密码" prop="confirmPassword">
        <u-input v-model="form.confirmPassword" password-icon type="password" placeholder="请确认新密码" />
      </u-form-item>
      <u-button
        :loading="loading"
        type="primary"
        @click="save"
        hover-class="none"
        :custom-style="signInBtnStyle"
        class="u-m-t-80"
        >确认</u-button
      >
    </u-form>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        password: "",
        newPassword: "",
        confirmPassword: "",
      },
      labelStyle: {
        color: "#333333",
      },
      loading: false,
      signInBtnStyle: {
        width: "100%",
        borderRadius: "8px",
        background: "#5BAC84",
        color: "#333333",
        fontWeight: "500",
        boxShadow: "0px 0px 10px 0px rgba(1, 72, 51, 0.2)",
      },
      rules: {
        password: [
          {
            required: true,
            min: 5,
            message: "请输入当前密码,不能小于5位数",
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            min: 5,
            message: "请输入新密码,不能小于5位数",
            trigger: "blur",
          },
        ],
        confirmPassword: {
          validator: (rule, value, callback) => {
            return this.form.newPassword === value;
          },
          message: "2次密码不匹配",
        },
      },
    };
  },
  onReady() {
    this.$refs.changePasswordForm.setRules(this.rules);
  },
  methods: {
    save() {
      const app = getApp();
      this.loading = true;
      this.$refs.changePasswordForm.validate((valid) => {
        if (valid) {
          this.$post("/personal/updatePassword", this.form)
            .then((res) => {
              if (res?.body) {
                this.$refs.uToast.show({
                  title: "修改成功",
                  type: "success",
                });
                this.loading = false;
                setTimeout(() => {
                  app.globalData.token = "";
                  app.globalData.userInfo = {};
                  app.globalData.userInfoData = {};
                  uni.removeStorageSync("HCuname");
                  uni.removeStorageSync("HCpassw");

                  uni.reLaunch({
                    url: "/pages/login/index",
                  });
                }, 1000);
              } else {
                this.loading = false;
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.changePassword {
  padding: $uni-page-padding;
}
</style>
